<template>
  <div class="content">
    <CustomSteps :active="active" />
    <step1 v-if="active === 1" @changeActive="active = $event" />
    <step2 v-if="active === 2" @changeActive="active = $event" />
    <step3 v-if="active === 3" @changeActive="active = $event" />
  </div>
</template>
<script>
  import CustomSteps from './components/CustomSteps.vue'
  import step1 from './components/step1.vue'
  import step2 from './components/step2.vue'
  import step3 from './components/step3.vue'
  import { removeStorage, setStorage } from '@/utils/tools'
  export default {
    name: 'PayStep2',
    components: {
      CustomSteps,
      step1,
      step2,
      step3,
    },
    data() {
      return {
        // 当前步骤
        active: 1,
      }
    },
    mounted() {
      setStorage('pageType', this.$route.query.type || '') // reUpload 重新上传
      this.resetAllInfo()
    },
    methods: {
      // 初次进入清除缓存
      resetAllInfo() {
        removeStorage('tableConfig')
        removeStorage('excelData')
        removeStorage('treeInfo')
      },
    },
  }
</script>
<style lang="scss" scoped>
  .content {
    overflow-y: auto;
    height: 95vh;
  }
  .base-color {
    color: #6ab8b8;
  }

  .tips {
    line-height: 2;
    width: 70%;
    li::before {
      content: '\2022';
      color: #ff943e;
      margin-right: 10px;
    }
    span {
      color: #ff943e;
    }
  }
  .w90 {
    width: 90%;
  }
  .form-item {
    width: 50%;
    font-weight: bold;
  }
  .check-card {
    border: 1px solid #d7d7d7;
    font-weight: normal;
    padding: 10px;
  }
</style>
